<template>

  <div class="person">
    <h1>情况三: 监视reactive定义的对象数据类型</h1>
    <h2>{{ person.name }}</h2>
    <h2>{{ person.age }}</h2>
    <h2>{{ person.car.c1 }}</h2>
    <h2>{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改全部的车</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, watch, reactive} from 'vue'

// -----------------数据--------------------
let person = reactive({
  name: '张三',
  age:20,
  car:{
    c1: '宝马',
    c2: '奔驰'
  }
})

function changeName() {
  person.name = '贾金博'
}

function changeAge() {
  person.age = 18
}

function changeC1() {
  person.car.c1 = '宝马plus'
}

function changeC2() {
  person.car.c2 = '奔驰plus'
}

function changeCar() {
  //下面这个写是多余的  car是属性 是可以直接修改的
  person.car = {c1: 'c1', c2:'🚗'}
}

//---------------------监视--------------------------
//getter函数 是一个能返回一个值的函数
watch(()=>{
  return person.name
}, (newValue, oldValue)=>{
  console.log(oldValue + "-->" + newValue);
  
})


//监视人的名字和第一台车
watch([()=>person.name, ()=>person.car.c1], (newValue, oldValue) => { // newValue就是数组了
  console.log(oldValue + "-->" + newValue);
}, {deep: true})



</script>

<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>